<template>
  <!-- 弹窗图片 -->
  <!-- 添加的图片 -->
  <div v-if="visible">
    <div class="dialog-title-yy-information">
      <img src="../assets/img/module2/content.png" alt="弹窗图片" />
      <img src="../assets/img/module2/snailtitleicon.png" style="position: absolute; top: -10%; left: 5%" />
      <span class="dialog-title-text-yy-information" style="margin-left: 20px">文件内容</span>
    </div>

    <div class="dialog-container-ok-information table1" style="max-height: 90vh">
      <div class="bottom-section-yy-information">
        <!-- 文件名称 -->
        <div style="margin-bottom: 3px;display: flex;align-items: center; position: relative;">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            文件名称
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">
              {{ selectedDetails.approvalFileName }}</span>
          </div>
        </div>
        <!-- 接收时间 -->
        <div style="margin-bottom: 3px; display: flex; align-items: center; position: relative;">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            接收时间
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">
              {{ selectedDetails.applicationAcceptanceTime }}
            </span>
          </div>
        </div>

        <!-- 标题内容 -->
        <!-- <div class="select-section-title-ok-information">
          <div class="select-section-titleimg-yy-information"></div>
          <span class="select-section-titletext-yy-information">空域使用需求信息</span>
        </div> -->

        <!-- 标题内容 -->
        <div class="select-section-title-yy-pr-information">
          <div class="select-section-titleimg-yy-pr-information"> </div>
          <span class="select-section-titletext-yy-pr-information">空域使用需求信息</span>
        </div>

        <!-- 下拉框 -->
        <div class="select-section-yy-pr-information">
          <!-- 起降场信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              起降场
            </p>
            <select class="select-info-box-yy-information" v-model="selectedAirport"
              @change="handleSelectChange('main1', selectedAirport)">
              <!-- 如果没有数据，显示不可选的 "没有数据" 选项 -->
              <option v-if="selectedDetails.takeoffLandInfo.length === 0" class="select-info-box-yy-information-item"
                disabled>没有起降场数据</option>
              <option disabled hidden value="default" class="select-info-box-yy-information-item">
                请选择
              </option>
              <option v-for="(row, index) in selectedDetails.takeoffLandInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedAirport !== 'default'" class="select-detail-box-yy-information"
            style="margin-bottom: 3px; margin-left: 27.2%; padding-bottom: 18px">
            <div
              style="width: 100%; height: 40px; top: 0px; left: 0px; position: relative; display: flex; justify-content: space-around;">
              <div v-bind:class="{
                'xuanzedian-blue-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 0 || selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 2,
                'xuanzedian-white-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 1
              }" style="top:18px"></div>
              <div class="font-yy-detail-img-pr-information" style="position: relative; top: 18px; left: -18px">
                起飞
              </div>

              <div v-bind:class="{
                'xuanzedian-blue-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 1 || selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 2,
                'xuanzedian-white-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 0
              }" style=" top:18px"></div>
              <div class="font-yy-detail-img-pr-information" style="position: relative; top: 18px; left: -18px">
                降落
              </div>
            </div>
            <div style="
                position: relative;
                display: block;
                margin-top: 12px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                机场类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.takeoffLandInfo[Number(selectedAirport)].landingZoneType }} -->
                {{ airportSizeText }}
              </span>
            </div>

            <div style="position: relative; display: block; margin-top: 14px; margin-left: 9%; ">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                经度信息：
              </span>
              <span class="font-yy-detail-pr-information">
                {{ formatCoordinate(selectedDetails.takeoffLandInfo[Number(selectedAirport)].longitude) }}</span>
            </div>

            <div style="position: relative; display: block; margin-top: 14px; margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                纬度信息：
              </span>
              <span class="font-yy-detail-pr-information">
                {{ formatCoordinate(selectedDetails.takeoffLandInfo[Number(selectedAirport)].latitude) }}</span>
            </div>
          </div>

          <!-- 航路信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              航 路
            </p>
            <select class="select-info-box-yy-information" v-model="selectedAirline"
              @change="handleSelectChange('main2', selectedAirline)">
              <!-- 如果没有数据，显示不可选的 "没有数据" 选项 -->
              <!-- <option v-if="selectedDetails.airlineInfo.length === 0" class="select-info-box-yy-information-item"
                disabled>没有航路数据</option> -->
              <option disabled hidden value="default" class="select-info-box-yy-information-item">
                请选择
              </option>
              <option v-for="(row, index) in selectedDetails.airlineInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedAirline != 'default'" class="select-detail-box-yy-information" style="margin-bottom: 3px; 
          margin-left: 27.2%; padding-bottom: 18px; padding-top: 6px;">
            <div style="position: relative; display: block; margin-top: 14px">
              <span class="font-yy-detail-pr-information"
                style="position: relative; margin-left: 9%; color: rgba(135, 183, 218, 1); ">
                航路类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.airlineInfo[Number(selectedAirline)].routeType }} -->
                {{ airlineTypeText }}
              </span>
            </div>

            <div style="position: relative; display: block; margin-top: 10px; margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                坐标信息:
              </span>
            </div>

            <div style="position: relative; display: block; margin-top: 8px; margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative">
                <!-- {{ selectedDetails.airlineInfo[Number(selectedAirline)].coordinateInformationPoints }} -->
                {{ allCoordinateLabels }}
              </span>
            </div>

            <div style="position: relative; display: block; margin-top: 10px; margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                可用高度层信息：（m）
              </span>
            </div>

            <div style="position: relative; display: block; margin-top: 8px; margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative">
                {{ selectedDetails.airlineInfo[Number(selectedAirline)].flightLevel }}
              </span>
            </div>
          </div>

          <!-- 作业区域信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              作业区域
            </p>
            <select class="select-info-box-yy-information" v-model="selectedRegion"
              @change="handleSelectChange('main3', selectedRegion)">
              <!-- 如果没有数据，显示不可选的 "没有数据" 选项 -->
              <!-- <option v-if="selectedDetails.workInfo.length === 0" class="select-info-box-yy-information-item" disabled>
                没有作业区数据</option> -->
              <option disabled hidden value="default" class="select-info-box-yy-information-item">
                请选择
              </option>
              <option v-for="(row, index) in selectedDetails.workInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedRegion != 'default'" class="select-detail-box-yy-information"
            style="margin-bottom: 3px; margin-left: 27.2%; padding-bottom: 18px; padding-top: 6px;">
            <div style="position: relative; display: block; margin-top: 14px">
              <span class="font-yy-detail-pr-information"
                style="position: relative; margin-left: 9%;  color: rgba(135, 183, 218, 1);">
                区域类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].operationAreaType }} -->
                {{ operationAreaTypeText }}
              </span>
            </div>

            <div style="position: relative; display: block; margin-top: 14px">
              <span class="font-yy-detail-pr-information"
                style="position: relative; margin-left: 9%; color: rgba(135, 183, 218, 1);">
                任务类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].operationType }} -->
                {{ workTypeText }}
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 10px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                坐标信息:
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 8px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].coordinateInformationPoints }} -->
                {{ workCoordinateLabels }}
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 10px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                高度区间：（m）
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 8px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].heightIntervalTest }} -->
                {{ workHeightInterval }}
              </span>
            </div>
          </div>

          <!-- 特殊区域信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              特殊区域
            </p>
            <select class="select-info-box-yy-information" v-model="selectedSpRegion"
              @change="handleSelectChange('main4', selectedSpRegion)">
              <!-- 如果没有数据，显示不可选的 "没有数据" 选项 -->
              <!-- <option v-if="selectedDetails.specialInfo.length === 0" class="select-info-box-yy-information-item"
                disabled>没有特殊区域数据</option> -->
              <option disabled hidden value="default" class="select-info-box-yy-information-item">
                请选择
              </option>
              <option v-for="(row, index) in selectedDetails.specialInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedSpRegion != 'default'" class="select-detail-box-yy-information" style="
              margin-bottom: 3px;
              margin-left: 27.2%;
              padding-bottom: 18px;
              padding-top: 6px;
            ">
            <div style="position: relative; display: block; margin-top: 14px">
              <span class="font-yy-detail-pr-information" style="
                  position: relative;
                  margin-left: 9%;
                  color: rgba(135, 183, 218, 1);
                ">
                航路类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.specialInfo[Number(selectedSpRegion)].specialAirspaceType }} -->
                {{ specialAreaType }}
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 10px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                坐标信息:
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 8px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative">
                <!-- {{ selectedDetails.specialInfo[Number(selectedSpRegion)].coordinateInformationPoints }} -->
                {{ specialCoordinateLabels }}
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 10px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative; color: rgba(135, 183, 218, 1)">
                可用高度层信息：（m）
              </span>
            </div>

            <div style="
                position: relative;
                display: block;
                margin-top: 8px;
                margin-left: 9%;
              ">
              <span class="font-yy-detail-pr-information" style="position: relative">
                <!-- {{ selectedDetails.specialInfo[Number(selectedSpRegion)].heightIntervalTest }} -->
                {{ specialHeightInterval }}
              </span>
            </div>
          </div>
        </div>

        <!-- <img
          :src="selectedDetails.documentsPreview"
          alt="图片"
          style="
            width: 95%;
            position: relative;
            top: 1vh;
            margin-left: 10px;
            margin-right: 15px;
            height: 300px;
            margin-bottom: 10px;
          "
        /> -->
        <!-- <div>
          <button @click="downloadAttachment" type="primary" icon="el-icon-search" class="el-query-button">
            查看附件
          </button>
        </div>
        <div>
          <button :disabled="isAlreadyOpened" @click="applyOpenStatus" type="primary" class="el-query-button"
            :class="{ 'disabled-button': isAlreadyOpened }">
            {{ isAlreadyOpened ? '已经启用' : '申请启用' }}
          </button>
        </div> -->
        <!-- 按钮容器 -->
        <div style="display: flex; align-items: center; gap: 5px;">
          <!-- 查看附件按钮 -->
          <button @click="downloadAttachment" type="primary" icon="el-icon-search" class="el-query-button">
            查看附件
          </button>

          <!-- 动态状态按钮 -->
          <button :disabled="isAlreadyOpened" @click="applyOpenStatus" type="primary" class="el-query-button"
            :class="{ 'disabled-button': isAlreadyOpened }">
            {{ isAlreadyOpened ? '已经启用' : '申请启用' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE2;

export default {
  name: "GoodDialog",
  data() {
    return {
      selectedAirport: "default",
      selectedAirline: "default",
      selectedRegion: "default",
      selectedSpRegion: "default",
      activeNames: [],
      activeNamesDetail: [],
    };
  },

  props: {
    selectedDetails: {
      required: true,
    },

    visible: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    isAlreadyOpened() {
      return this.selectedDetails.approvalStatus === 1; // 判断是否已经开启
    },
    airportSizeText() {
      const sizeType = this.selectedDetails.takeoffLandInfo[Number(this.selectedAirport)].sizeType;
      switch (sizeType) {
        case 0:
          return '小型';
        case 1:
          return '中型';
        case 2:
          return '大型';
        default:
          return '未知类型'; // 处理意外情况
      }
    },
    airlineTypeText() {
      const type = this.selectedDetails.airlineInfo[Number(this.selectedAirline)].type;
      switch (type) {
        case 0:
          return '低速';
        case 1:
          return '中速';
        case 2:
          return '高速';
        default:
          return '未知类型'; // 处理意外情况
      }
    },
    allCoordinateLabels() {
      const selectedAirline = this.selectedDetails.airlineInfo[Number(this.selectedAirline)];

      if (selectedAirline && selectedAirline.shapes && selectedAirline.shapes[0] && selectedAirline.shapes[0].shapes[0] && selectedAirline.shapes[0].shapes[0].points) {
        return selectedAirline.shapes[0].shapes[0].points
          .map(point => `URL-${point.sequence}`)
          .join(', '); // 使用逗号和空格分隔标签
      }

      return '无坐标信息'; // 如果没有数据，返回提示文字
    },
    operationAreaTypeText() {
      const selectedRegion = Number(this.selectedRegion);
      const workInfo = this.selectedDetails?.workInfo?.[selectedRegion];
      const shapeType = workInfo?.shapes?.[0]?.shapes?.[0]?.shapeType;

      // 定义 shapeType 的对应文本
      const shapeTypeText = {
        1: '圆柱体',
        2: '扇形柱体',
        3: '多边形柱体',
        4: '航路'
      };

      // 返回对应的文本或 '未知类型' 如果不存在
      return shapeTypeText[shapeType] || '未知类型';
    },
    workTypeText() {
      const type = this.selectedDetails.workInfo[Number(this.selectedRegion)].type;

      switch (type) {
        case 0:
          return '即时配送';
        case 1:
          return '科技文旅';
        case 2:
          return '环境监测';
        case 3:
          return '立体交通';
        case 4:
          return '边境管控';
        default:
          return '未知类型'; // 防止出现其他类型
      }
    },
    workCoordinateLabels() {
      const selectedWorkInfo = this.selectedDetails.workInfo[Number(this.selectedRegion)];
      if (selectedWorkInfo && selectedWorkInfo.shapes && selectedWorkInfo.shapes[0] && selectedWorkInfo.shapes[0].shapes[0] && selectedWorkInfo.shapes[0].shapes[0].points) {
        return selectedWorkInfo.shapes[0].shapes[0].points
          .map(point => `P-${point.sequence}`)
          .join(', ');
      }
      return '无坐标信息';
    },
    workHeightInterval() {
      const selectedRegion = Number(this.selectedRegion);
      const workInfo = this.selectedDetails?.workInfo?.[selectedRegion];

      if (workInfo?.shapes?.[0]?.shapes?.[0]) {
        const { minAltitude, maxAltitude } = workInfo.shapes[0].shapes[0];
        return `${minAltitude} - ${maxAltitude}`;
      }
      return 'N/A';  // 若数据缺失则显示N/A
    },
    specialAreaType() {
      const selectedSpRegion = Number(this.selectedSpRegion);
      const specialInfo = this.selectedDetails?.specialInfo?.[selectedSpRegion];
      const shapeType = specialInfo?.shapes?.[0]?.shapes?.[0]?.shapeType;

      // 使用一个映射表来定义 shapeType 的文本
      const shapeTypeText = {
        1: '圆柱体',
        2: '扇形体',
        3: '多边形柱体',
        4: '航路'
      };

      // 如果 shapeType 存在，则返回对应的文本，否则返回 '未知类型'
      return shapeTypeText[shapeType] || '未知类型';
    },
    specialCoordinateLabels() {
      const selectedSpecialInfo = this.selectedDetails.specialInfo[Number(this.selectedSpRegion)];
      if (selectedSpecialInfo && selectedSpecialInfo.shapes && selectedSpecialInfo.shapes[0] && selectedSpecialInfo.shapes[0].shapes[0] && selectedSpecialInfo.shapes[0].shapes[0].points) {
        return selectedSpecialInfo.shapes[0].shapes[0].points
          .map(point => `S-${point.sequence}`)
          .join(', ');
      }
      return '无坐标信息';
    },
    specialHeightInterval() {
      const selectedSpRegion = Number(this.selectedSpRegion);
      const specialInfo = this.selectedDetails?.specialInfo?.[selectedSpRegion];
      if (specialInfo?.shapes?.[0]?.shapes?.[0]) {
        const { minAltitude, maxAltitude } = specialInfo.shapes[0].shapes[0];
        return `${minAltitude} - ${maxAltitude}`;
      }
      return 'N/A';  // 若数据缺失则显示N/A
    },
  },
  methods: {
    async applyOpenStatus() {
      try {
        if (this.isAlreadyOpened) return; // 如果已经开启，禁止操作

        // 向后端发送申请开启请求
        const response = await axios.post(`${baseApi}/airspaceApproval/switch`, null, {
          params: {
            openId: this.selectedDetails.id, // 使用 Query 参数
          },
        });

        if (response.data.code === 0) {
          this.$message.success('申请开启成功');
          this.selectedDetails.approvalStatus = 1
          this.$emit('refreshTable'); // 通知父组件刷新表格数据
        } else {
          this.$message.error('申请开启失败');
        }
      } catch (error) {
        console.error("申请开启失败", error);
        this.$message.error('网络错误，申请开启失败');
      }
    },
    closeDialog() {
      this.$emit("update:visible", false); // 通知父组件关闭弹窗
    },
    refreshChange() {
      this.selectedAirport = "default";
      this.selectedAirline = "default";
      this.selectedRegion = "default";
      this.selectedSpRegion = "default";
    },
    formatCoordinate(coord) {
      const degrees = Math.floor(coord);
      const minutes = Math.floor((coord - degrees) * 60);
      const seconds = (((coord - degrees) * 60 - minutes) * 60).toFixed(1);
      return `${degrees}°${minutes}'${seconds}"`;
    },
    handleSelectChange(selected, index) {
      // 清空其他选择的值
      let type = null;
      if (selected !== "main1") this.selectedAirport = "default";
      if (selected !== "main2") this.selectedAirline = "default";
      if (selected !== "main3") this.selectedRegion = "default";
      if (selected !== "main4") this.selectedSpRegion = "default";
      this.$nextTick(() => {
        if (selected == 'main1') { type = 'circular' }
        else if (selected == 'main2') { type = 'straight' }
        else if (selected == 'main3') {
          if (this.selectedDetails.workInfo[Number(this.selectedRegion)].shapes[0].shapes[0].shapeType === 3) { type = 'polygonal' }
          else { type = 'circular' }
        }
        else if (selected == 'main4') {
          if (this.selectedDetails.specialInfo[Number(this.selectedSpRegion)].shapes[0].shapes[0].shapeType === 3) { type = 'polygonal' }
          else { type = 'circular' }
        }
        this.$emit("entity-change", selected, index, type);
        // console.log(selected);
        // console.log(index);
      });
    },

    handleChangeDetail() {
      this.$nextTick(() => {
        this.$emit("entity-change", this.activeNames, this.activeNamesDetail);
        // console.log(this.activeNames);
        // console.log(this.activeNamesDetail);
      });
      // console.log('触发点击');
      // console.log(this.activeNames);
      // console.log(this.activeNamesDetail);
    },
    testClick() {
      this.activeNames = ["main3"];
      this.activeNamesDetail = [0];
    },

    clickGis(mainid, indexid) {
      this.selectedAirport = "default";
      this.selectedAirline = "default";
      this.selectedRegion = "default";
      this.selectedSpRegion = "default";
      if (mainid == "main1") {
        this.selectedAirport = indexid;
      } else if (mainid == "main2") {
        this.selectedAirline = indexid;
      } else if (mainid == "main3") {
        this.selectedRegion = indexid;
      } else if (mainid == "main4") {
        this.selectedSpRegion = indexid;
      }
    },
    downloadAttachment() {
      if (this.selectedDetails.documentsPreview) {
        const link = document.createElement("a");
        link.href = this.selectedDetails.documentsPreview;
        link.download = "附件.pdf";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
  },
};
</script>
<style scoped>
.dialog-title-yy-information {
  width: 62%;
  position: absolute;
  top: 5%;
  left: 5%;
  /* background-color: white; */
}


.dialog-container-ok-information {
  background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%;
  /* background-color:white; */
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  height: 90%;
  position: absolute;
  top: 8%;
  left: 5%;
  padding: 0px;
  flex-grow: 1;
  overflow: auto;
  /* scrollbar-width: none; */
  /* 隐藏横向滚动条 */
  overflow-x: hidden;
  pointer-events: auto;
}


.table1::-webkit-scrollbar {
  width: 0.125rem;
  background-color: rgba(0, 16, 29, 0.5) !important;
}

.table1::-webkit-scrollbar-thumb {
  background: #0378FF;
  border-radius: 0.625rem;
}


.top-section-yy-information {
  /* z-index: 10; */
  /* position:absolute; */

  margin-bottom: 5%;
  margin-top: 5%;
  left: 0%;
  height: 8%;
  top: 5%;
  /* display: block; */
  /* background-color: blue; */
}

.select-section-yy-information {
  background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%;
  position: absolute;
  /* background-color:transparent; */
  left: 6%;
  top: 215px;
  width: 88%;
  height: 190px;
}

.select-section-title-ok-information {
  position: absolute;
  margin-top: -60px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
}

.select-section-titleimg-yy-information {
  position: absolute;
  left: 6%;
  top: 22%;
  width: 7%;
  height: 44%;
  background-image: url("../assets/img/module2/righticon.png");
  background-size: 100% 100%;
  background-color: transparent;
}

.select-section-titletext-yy-information {
  position: absolute;
  top: 23%;
  left: 15%;
  font-size: 18px;
  font-weight: 300;
}

.dropdown-container-yy-information {
  position: absolute;
  top: 25%;
  left: 0%;
  height: 75%;
  width: 100%;
}

.dropdown-yy-information {
  position: relative;
  left: 15%;
  width: 70%;
  height: 20%;
  margin-top: 5%;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: white;
  font-weight: 600;
  background-color: black;
  font-size: 20px;
}

.dropdown-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
}

.up-content-text-yy-information {
  margin-right: 3%;
  text-align: right;
  width: 27%;
  z-index: 2000;
}

.info-box-yy-information {
  position: relative;
  background-image: url("../assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.info-box-text-yy-information {
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.info-box-yy-ps-information {
  position: relative;
  background-image: url("../assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.select-yy-information {
  background-color: transparent;
  border: none;
  color: rgba(208, 219, 227, 1);
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding-left: 10%;
  z-index: 3000;
}

.select-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
  border: none;
}

.el-query-button {
  background-image: url("../assets/img/module2/button-tijiao.png");
  background-size: 100% 100%;
  border: none;
  background-color: transparent;
  height: 40px;
  width: 120px;
  color: white;
  font-size: 18px;
  text-align: center;
  position: relative;
  top: 2vh;
  margin: 0 auto;
  /* 使按钮水平居中 */
  display: block;
}

.dialog-title-yy-information {
  width: 62%;
  position: absolute;
  top: 5%;
  left: 5%;
  /* background-color: white; */
}

.dialog-title-text-yy-information {
  position: absolute;
  top: 5%;
  left: 17%;
  overflow-wrap: break-word;

  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 22px;
  letter-spacing: 1px;
  /* font-family: PangMenZhengDao-3; */
  font-family: 'smallTitleFont', sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.top-section-yy-information {
  margin-bottom: 5%;
  margin-top: 5%;
  left: 0%;
  height: 8%;
  top: 5%;
}

.bottom-section-yy-information {
  position: absolute;
  left: 0%;
  top: 3%;
  width: 100%;
  height: 90%;
}

.select-section-yy-information {
  background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%;
  position: absolute;
  /* background-color:transparent; */
  left: 6%;
  top: 215px;
  width: 88%;
  height: 190px;
}

.dropdown-container-yy-information {
  /* background-color: white; */
  position: absolute;
  top: 25%;
  left: 0%;
  height: 75%;
  width: 100%;
}

.dropdown-yy-information {
  position: relative;
  left: 15%;
  width: 70%;
  height: 20%;
  margin-top: 5%;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: white;
  font-weight: 600;
  background-color: black;
  font-size: 20px;
}

.dropdown-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
}

.up-content-text-yy-information {
  background-color: transparent;
  margin-right: 3%;
  text-align: right;
  width: 27%;
  z-index: 2000;
  font-size: 14px;
}

.select-content-text-yy-information {
  background-color: transparent;
  margin-right: 0.3%;
  text-align: center;
  width: 27%;
  z-index: 2000;
  font-size: 14px;
}

.select-info-box-yy-information {
  background-image: url("../assets/img/module2/text.png");
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  padding-left: 5%;
  width: 68%;
  height: 40px;
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
}

.select-detail-box-yy-information {
  background-image: url("../assets/img/module2/text.png");
  background-size: 100% 100%;
  /* height:40px; */
  width: 68%;
  margin-right: 10px;
  /* background-color: white; */
}

.info-box-yy-information {
  position: relative;
  background-image: url("../assets/img/module2/text.png");

  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.info-box-text-yy-information {
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.info-box-yy-ps-information {
  position: relative;
  background-image: url("../assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.select-info-box-yy-information {
  background-image: url("../assets/img/module2/text.png");
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  padding-left: 5%;
  width: 68%;
  height: 40px;
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
}

.select-info-box-yy-information-item {
  /* 不支持设置图片 */
  /* background-image:url('../assets/img/module2/table.png'); */
  background-color: black;
  background-size: 100% 100%;
  color: #ffffff;
  /* 设置文字颜色 */
}

.select-yy-information {
  background-color: transparent;
  border: none;
  color: rgba(208, 219, 227, 1);
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding-left: 10%;
  z-index: 3000;
}

.select-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
  border: none;
}

.disabled-button {
  cursor: not-allowed;
}
</style>
